import { useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";
import { List, Avatar, Button, Dialog } from "antd-mobile";
import { createAction, getRealName } from "@common/utils";
import { PUSH_PAGE_STACK, CLEAR_ALL } from "@store/global-state/action-types";
import { SAGA_USER_PROFILE_LOAD_TENANTS } from "@store/user-profile/saga-types";
import { SAGA_LOGOUT } from "@store/acl/saga-types";

const Mine = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();

  const openNewPage = (path) => {
    let url = `/app/landing-page${path}`;
    navigate(url);
    dispatch(createAction(PUSH_PAGE_STACK, url));
  };

  const openTenantInfoPage = () => {
    dispatch(
      createAction(SAGA_USER_PROFILE_LOAD_TENANTS, {
        callback: () => openNewPage("/tenant-info"),
      })
    );
  };

  const handleLogout = () => {
    Dialog.confirm({
      content: "确定退出?",
      onConfirm: () => {
        dispatch(
          createAction(SAGA_LOGOUT, {
            callback: () => {
              dispatch(createAction(CLEAR_ALL));
              navigate("/");
            },
          })
        );
      },
    });
  };

  return (
    <>
      <List mode="card">
        <List.Item
          key="currentUser"
          prefix={<Avatar src="" />}
          description="--"
          onClick={() => {
            console.log("should call remote api");
          }}
        >
          { getRealName(window.sessionStorage.getItem('token')) }
        </List.Item>
      </List>
      <List>
        <List.Item onClick={() => openNewPage("/modify-pwd")}>
          修改密码
        </List.Item>
        <List.Item onClick={() => openNewPage("/default-scenario")}>
          默认使用场景
        </List.Item>
        <List.Item onClick={() => openNewPage("/default-parsing-rule")}>
          默认解析规则
        </List.Item>
        <List.Item onClick={() => openNewPage("/server-ip")}>
          后端服务配置
        </List.Item>
        <List.Item onClick={openTenantInfoPage}>租户信息</List.Item>
        <List.Item onClick={() => openNewPage("/about")}>关于WMS</List.Item>
      </List>
      <Button
        size="large"
        color="danger"
        style={{ margin: "20px 12px" }}
        onClick={handleLogout}
      >
        退出登录
      </Button>
    </>
  );
};

export default Mine;
